<script setup>
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
import { ref, computed } from 'vue'
// 1:准备数据
// 提供数据
/*
父传子
   传   子组件标签  :属性名="父组件属性"
   收  子组件内
    const prop= defineProps({属性名:{type,default,required,validator}})
    html: 属性名
    js:prop.属性名

子传父
   子组件标签  @方法名="父组件方法"
   子组件内
     const emits= defineEmits(['方法名'])
     emits('方法名'，实参值)
*/

const list = ref([
  {
    id: 1,
    name: '吃饭',
    done: true
  },
  {
    id: 2,
    name: '睡觉',
    done: false
  },
  {
    id: 3,
    name: '打豆豆',
    done: false
  }
])
// all,active,completed
const active = ref('all')
// 修改active状态
const setActive = str => {
  active.value = str
}
// 状态修改
const setDone = id => {
  // 返回值=数组.find(item=>item.id===id)
  const findItem = list.value.find(item => item.id === id)
  findItem.done = !findItem.done
}
// 删除方法
const delList = id => {
  // 返回值=数组.filter(item=>{return boolean})
  list.value = list.value.filter(item => item.id !== id)
}
// 添加方法
const add = obj => {
  list.value.push(obj)
}
// 计算属性产生新的列表
/*
1：导入  import {computed} from 'vue'
2:const 名字=computed(()=>{
  return 新的值
})
*/
const newList = computed(() => {
  return list.value.filter(item => {
    if (active.value === 'all') {
      return true
    } else if (active.value === 'active') {
      return item.done === false
    } else if (active.value === 'completed') {
      return item.done
    }
  })
})
// 清空已完成项
const clearCompleted = () => {
  list.value = list.value.filter(item => item.done === false)
}
</script>

<template>
  <section class="todoapp">
    <TodoHeader @add="add"></TodoHeader>
    <TodoMain :list="newList" @setDone="setDone" @delList="delList"></TodoMain>
    <TodoFooter
      :list="newList"
      :active="active"
      @setActive="setActive"
      @clearCompleted="clearCompleted"
    ></TodoFooter>
  </section>
</template>

<style></style>
